<template>
  <view class="order-page">
    <!-- #ifdef H5 -->
    <custom-navbar title="我的订单" />
    <!-- #endif -->
    <view class="nav-list d-flex">
      <view
        class="item"
        v-for="item in navList"
        :key="item.value"
        :class="item.value == active ? 'active' : ''"
        @click="onNavClick(item.value)"
      >
        {{item.label}}
      </view>
    </view>
    <view class="main">
      <load-list
        :loading="loading"
        :loadMore="loadMore"
        :haveMore="haveMore"
        :list="list"
        noDataText="暂无订单"
      >
        <template #default>
          <view>
            <order-item
              v-for="item in list"
              :key="item.orderNo"
              :item="item"
            />
          </view>
        </template>
      </load-list>
      
    </view>
  </view>
</template>

<script>
import {
  getOrderEnum,
  getOrderList,
} from '@/api'

import orderItem from './index-components/orderItem.vue'

export default {
  name: 'OrderList',
  components: { orderItem },
  data() {
    return {
      navList: [
        { label: '全部', value: 0 },
        { label: '待质检', value: 1 },
        { label: '待收款', value: 2 },
        { label: '已完成', value: 3 },
      ],
      active: 0,

      loading: false,
      loadMore: false, // 正在加载中更多数据
      haveMore: true, // 是否还有更多数据
      page: 1,
      size: 20,
      list: [],
    }
  },

  onLoad(option) {
    const { status } = option
    this.active = status || 0
    this.loadList()
  },

  onPullDownRefresh() {
    this.loadMore = true
    this.page = 1
    this.list = []
    this.loading = true
    this.$nextTick(() => {
      this.loadList()
    })
  },

  // 页面滚动到底部
  onReachBottom() {
    if (!this.loadMore && this.haveMore) {
      this.loadMore = true
      this.page = Number(this.page) + 1
      this.$nextTick(() => {
        this.loadList()
      })
    }
  },

  methods: {

    loadList() {
      try {
        uni.showLoading({ title: '加载中' })
        getOrderList({
          'status': this.active,
          page: this.page,
          size: this.size,
        }).then(({ data, code }) => {
          uni.hideLoading()
          if (code === 200 && data && data.rows && data.rows.length) {
            if (data.rows.length >= this.size) {
              this.haveMore = true
            } else {
              this.haveMore = false
            }
            const list = [ ...this.list, ...data.rows]
            this.list = list
          }
        })
      } finally {
        this.loadMore = false
        this.loading = false
        uni.stopPullDownRefresh()
      }
    },
    

    // nav点击
    onNavClick(active) {
      this.page = 1
      this.list = []
      this.loading = true
      this.loadMore = true
      this.active = active
      this.$nextTick(() => {
        this.loadList()
      })
    },
  }
}
</script>


<style lang="scss" scoped>

.order-page{
  min-height: 100vh;
  background: #f2f3f7;

.nav-list{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 750rpx;
  background: #Fff;
  padding: 11rpx 20rpx 0rpx;
  z-index: 1;
  /* #ifdef H5 */
  padding-top: calc(var(--status-bar-height) + 88rpx);
  /* #endif */
  .item{
    width: 25%;
    font-size: var(--hui-font-size-26);
    line-height: 80rpx;
    color: var(--hui-color-subtitle);
    text-align: center;
    &.active{
      position: relative;
      font-size: var(--hui-font-size-30);
      font-weight: bold;
      color: var(--hui-color-primary);
      &::after{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 2rpx;
        margin: 0 auto;
        content: "";
        width: 28rpx;
        height: 8rpx;
        background: var(--hui-color-primary);
        border-radius: 4rpx;
      }
    }
  }
}
}
.main{
  padding: 210rpx 20rpx 0;
}
</style>